@media only screen and (max-width: 575.98px) {
    #home-hero {
        /* 1. Set consistent mobile height */
        min-height: 260px !important;
        height: 27vh !important; /* Slightly increased for better text clearance */

        /* 2. Center content vertically to prevent "missing" text */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-bottom: 0 !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
        text-align: center !important;
    }

    .home-ban-mt {
        margin-top: 60px;
    }

    /* 3. Scale down the Home Hero Typography */
    #home-hero h1.display-1 {
        font-size: 2.2rem !important;
        line-height: 1.1 !important;
        margin-top: 110px !important;
        margin-bottom: 10px !important;
    }

    #home-hero h1 .fs-2 {
        font-size: 1.1rem !important;
        display: block;
        margin-top: 5px;
    }

    #home-hero p.font-serif {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-top: 10px !important;
        max-width: 100%;
    }

    /* 5. Fix Navbar Overlap */
    body {
        padding-top: 70px !important;
    }

    .carousel-item img {
        height: 35vh;
    }

    .contact-section.py-5 {
        padding-bottom: 0rem !important;
    }

    .gallery-carousel-section.py-5 {
        padding-top: 0rem !important;
    }

    .what-we-do-section.py-5 {
        padding-top: 4rem !important;
        padding-bottom: 0rem !important;
    }

    /* Force the white navbar to be visible on mobile */
    #scroll-navbar {
        display: flex !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0) !important;
    }

    /* Hide the transparent hero navbar on mobile */
    #hero-navbar {
        display: none !important;
    }

    /* Add padding to the top of your page so the fixed navbar doesn't cover the content */
    body {
        padding-top: 80px; /* Adjust this based on your logo height */
    }

    .page-hero {
        /* Set a safe mobile height */
        min-height: 260px !important;
        height: 27vh !important;
        padding: 0 20px;
    }

    /* Reduce font sizes so they fit in the smaller height */
    .page-hero h1 {
        font-size: 2.5rem !important;
        line-height: 1.2;
    }

    .page-hero p.lead {
        font-size: 1rem !important;
        line-height: 1.5;
    }

    .page-hero .container.position-relative.mt-5 {
        margin-top: 8rem !important;
    }

    /* Ensure the parallax background still covers the area */
    .parallax-bg {
        height: 110% !important;
        top: -5% !important;
    }

    .abt-img-container {
        margin-bottom: 45px;
        height: 216px;
    }

    .img-fluid.ecosystem-img {
        max-width: 100%;
        height: auto;
    }

    .eco-img-right {
        --bs-gutter-x: 2.5rem;
        --bs-gutter-y: 0;
        padding: 40px 10px 0px;
    }

    .spc-1 {
        padding-top: 0rem !important;
    }

    .spc-2 {
        margin-top: 0px;
    }

    .spc-3 {
        padding-top: 1rem !important;
    }

    .spc-4.py-5 {
        padding-bottom: 2rem !important;
    }

    .spc-5.py-5 {
        padding-bottom: 1rem !important;
    }

    .spc-6.mb-5 {
        margin-bottom: 0rem !important;
    }

    .spc-7.py-5 {
        padding-bottom: 0rem !important;
    }

    .spc-8.py-5 {
        padding-top: 2rem !important;
    }

    .spc-9 {
        margin-top: -1rem !important;
    }

    .lifestyle-section .col-md-6 {
        margin-top: 60px;
    }

    .gallery-item .gallery-overlay {
        top: 21px;
    }

    .gallery-img-tall {
        min-height: 350px;
    }

    .w-villas-1 {
        height: 350px;
    }

    .w-villas-2 {
        height: 350px;
    }

    .w_villas_img {
        flex: 0 0 auto;
        width: 70%;
    }

    .w_villa-loc-img {
        height: 430px;
    }

    .aqua-1 {
        height: 350px;
    }

    .invest-top-img {
        padding-inline: 4.5rem !important;
    }

    .invest-img {
        height: 350px;
    }

    .invest-scar-mg {
        margin-bottom: 1.5rem !important;
    }
    .invest-global-mg {
        margin-top: 0px;
    }

    .invest-global-pd {
        padding: 0rem !important;
    }

    .bonus_cust_img {
        flex: 0 0 auto;
        width: 75.667%;
    }

    .mob-invest-bonus {
        --bs-gutter-x: 4.5rem;
    }

    .cnct-img {
        min-height: 350px;
    }

    .grn-bg {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
}